<template>
    <!-- 大屏底部组件 -->
    <div class="page-bottom">
        <!-- 公告信息提示 -->
        <div class="bottom-info">
            <span class="info-tip">{{ tip }}</span>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from "vue";

//底部滚动显示的文字信息
let tip = ref("为了更好地服务您，我们不断优化后台管理系统，确保您在“星辰集市”购物网站上的每一次购物都能得到最佳体验。数据大屏底部显示的公告将为您提供最新的优惠信息、活动通知和重要提醒，让您第一时间了解“星辰集市”的最新动态。");

</script>
<script lang="ts">
export default {
    name:"ScreenBottom"
}
</script>

<style lang='scss' scoped>
.page-bottom{
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    background: rgba($color: #d6d6d4, $alpha: .3);

    /**公告信息提示部分 */
    .bottom-info{
        width: 100%;
        white-space: nowrap;
        overflow: hidden;
        .info-tip{
            width: 100%;          
            display: inline-block;
            color: #5c606c;
            font-size: 14px;
            animation: scroll 20s linear infinite;
        }
        @keyframes scroll {
            0% { transform: translateX(100%); }
            100% { transform: translateX(-100%); }
        }
    }
}

</style>